import hPic from '@/assets/react.svg'
import './HomeHead.scss'
import {useEffect, useMemo} from "react";
import {useNavigate} from 'react-router-dom'
import {connect} from "react-redux";
import {action} from "@/store/action/index.js";
const HomeHead = function HomeHead(props) {
    // eslint-disable-next-line react/prop-types
    let {today,info,queryUserInfoAsync} = props;
    let time = useMemo(() => {
        // eslint-disable-next-line react/prop-types
        let [, month, day] = today.match(/^\d{4}(\d{2})(\d{2})$/);
        let area = {
            '01': '一月',
            '02': '二月',
            '03': '三月',
            '04': '四月',
            '05': '五月',
            '06': '六月',
            '07': '七月',
            '08': '八月',
            '09': '九月',
            '10': '十月',
            '11': '十一月',
            '12': '十二月'
        }
        return {
            month: area[month],
            day
        }
    }, [today])
    let navigator = useNavigate()

    useEffect(() => {
        if(!info){
            queryUserInfoAsync()
        }
    }, []);
    return <header className="home-head-box">
        <div className="info-box">
            <div className="time">
                <span>{time.day}</span>
                <span>{time.month}</span>
            </div>
            <h2 className="title">日报</h2>
        </div>
        <div className="picture">
                <img src={info?info.authorImg:hPic} alt="" onClick={() => {
                    navigator('/personal')
                }}/>
        </div>
    </header>
}
export default connect(state => state.base,action.base)(HomeHead)